//-
    Match with Design Guide status:

        [ ] 1. Example implementation
        [ ] 2. Simple variable
        [ ] 3. Unbound instances
        [ ] 4. Bound instances and/or live feed
        [ ] 5. {{#if }} ... {{/if}} block
        [ ] 6. Test on mobile
        [ ] 7. Change sizes
        [ ] 8. Match theme
        [ ] 9. This checklist
anchor formal-field
.ui.segments
    h3.ui.top.attached.block.header formal-field #[a(href="#formal-field") #[i.linkify.icon]]
    .ui.attached.segment
        pre formal-field(on-valuechange="testFormalField" on-displaylog="testFormalFieldShow" value="\{{ value }}" _foo="\{{foo}}" _baz="\{{baz}}" someParam1="\{{.value1}}" someParam2="\{{.value2}}" )
        pre +partial('viewForm') -> partial   ###editable with doubleclick
        pre +partial('editForm') -> partial
        p
            code on-valuechange = (ev, log-item, finish) ->
        ul
            li #[code ev]: #[code ack-button] event
            li #[code log-item]: returns curr, prev, date, value by default
            li #[code finish]: is a function that takes log-item that user wanted to keep
        p
            code on-displaylog = (ev, log) ->  ### for displaying changelog with html in model
        ul
            li #[code ev]: #[code ack-button] event
            li #[code log]: returns curr, prev, date by default
        p
            code value and _* (like _foo etc.) attributes can be used without placed in curr
        h3 Original Data
        p This is the original data: {{ formalField.value1 }} &nbsp {{ formalField.value2 }}

        h3 Example
        p
            span "We need&nbsp;
            formal-field(
                on-valuechange="testFormalField"
                changelog="{{formalField.changelog}}"
                on-displaylog="testFormalFieldShow"
                
                value="112"
                value1="{{formalField.value1}}"
                value2="{{formalField.value2}}"
                _tempvalue="{{formalField.tempvalue}}"
                )
                +partial('viewForm')
                    span {{curr.value1}} {{curr.value2}}
                +partial('editForm')
                    input-field(value="{{ curr.value1 }}")
                        dropdown(data="{{ formalField.combobox }}" selected="{{ curr.value2 }}")
            span &nbsp;of product X."

        h3 Example's Change Log
        p Change log can be displayed externally (ie. outside of component)
        r-table
            thead
                tr
                    th count
                    th unit
                    th date
                    th state
            tbody
                +each('formalField.changelog')
                    tr
                        td {{.value1}}
                        td {{.value2}}
                        td {{unixToReadable(.date)}}
                        td {{.state}}


        h3 Test cases
        ol
            li.
                try: switch to edit mode -> change input value
                see: original data is not changing
            li.
                try: switch to edit mode -> change input -> cancel -> switch to edit mode
                see: edit form contains current data, not the data we just cancelled
            li.
                try: switch to edit mode -> change input -> accept
                see: orginal data is changed and log number button is showed
            li.
                try: switch to edit mode -> change input -> cancel -> switch to edit mode
                see: edit form contains current data, not the data we just cancelled
            li.
                try: press log button
                see: log data in a model
            li.
                try: press log button
                see: log data in a model and repetition of data is not showed
